<template>
  <div>
    <section class="detail-map-section detail-map-section1">
      <h3 class="task-title">
        仪表盘 <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
      </h3>
      <div class="detail-map">
        <canvas id="pfd" ref="pfd" style="transform-origin: 0 0;width: 100%;height: 100%;"></canvas>
      </div>
    </section>
    <section class="detail-map-section detail-map-section2">
      <h3 class="task-title">
        基本信息 <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
      </h3>
      <div class="detail-air">
        <div class="detail-air-box">
          <div class="detail-air-list" v-for="(item, index) in instrumentList" :key="index">
            <div class="detail-type">
              <img class="detail-icon" :src="getImageUrl(item.url)" />
              <div class="detail-text">
                <p class="detail-name">{{ item.num }}</p>
                <p class="detail-status">{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="detail-map-section detail-map-section3">
      <h3 class="task-title">
        卫星遥感 <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
      </h3>
      <div class="detail-air">
        <div class="detail-air-box">
          <div class="detail-air-list">
            <div class="detail-type">
              <img class="detail-icon" src="../../../../../assets/flaybg16.png" alt="" />
              <div class="detail-text">
                <p class="detail-name">{{ instrumentData.num }}</p>
                <p class="detail-status">卫星数量</p>
              </div>
            </div>
          </div>
          <div class="detail-air-list">
            <div class="detail-type">
              <img class="detail-icon" src="../../../../../assets/flaybg14.png" alt="" />
              <div class="detail-text">
                <p class="detail-name">{{ instrumentData.num1 }}</p>
                <p class="detail-status">海拔高度</p>
              </div>
            </div>
          </div>
          <div class="detail-air-list detail-air-list1">
            <div class="detail-type">
              <img class="detail-icon" src="../../../../../assets/flaybg20.png" alt="" />
              <div class="detail-text">
                <p class="detail-position">
                  经度
                  <span class=""> {{ instrumentData.num2 }} </span>
                </p>
                <p class="detail-position">
                  纬度
                  <span class=""> {{ instrumentData.num3 }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol, ElButton } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
// import Hls from 'hls.js';
import { useRouter } from 'vue-router';
import { openWindow } from '@vben/utils';
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const props = defineProps({ instrumentList: Array, instrumentData: Object });
const router = useRouter();
const pfd = ref(null);

// let hlsInstances: Record<number, Hls> = {};

const navToClick = () => {
  console.log('bbbbb');
  return;
  let nav = '/dashboard/dronemonitoring/detail/module/index.vue';
  if (nav?.startsWith('http')) {
    openWindow(nav);
    return;
  }
  if (nav?.startsWith('/')) {
    router.push(nav).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
};
const drawPFD = (ctx, pitch = 0, roll = 0, heading = 84, gs = 8, alt = 99) => {
  ctx.clearRect(0, 0, 400, 280);
  ctx.save();
  ctx.translate(200, 140);
  ctx.rotate((roll * Math.PI) / 180);
  ctx.translate(0, pitch * 2);

  // 天空
  ctx.fillStyle = '#4a5a6a';
  ctx.fillRect(-200, -140, 400, 140);
  // 地面
  ctx.fillStyle = '#7a4a2a';
  ctx.fillRect(-200, 0, 400, 140);

  // 刻度线
  ctx.strokeStyle = '#fff';
  ctx.font = '14px Arial';
  ctx.textAlign = 'center';
  for (let i = -40; i <= 40; i += 10) {
    ctx.beginPath();
    ctx.moveTo(-60, i * -2);
    ctx.lineTo(60, i * -2);
    ctx.stroke();
    if (i !== 0) {
      ctx.fillText(i, -70, i * -2 + 5);
      ctx.fillText(i, 70, i * -2 + 5);
    }
  }
  ctx.restore();

  // 中心准星
  ctx.strokeStyle = 'lime';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(200, 140, 10, 0, 2 * Math.PI);
  ctx.moveTo(190, 140);
  ctx.lineTo(210, 140);
  ctx.moveTo(200, 140);
  ctx.lineTo(200, 140);
  ctx.stroke();

  // GS速度条
  ctx.save();
  ctx.fillStyle = '#fff';
  ctx.fillRect(10, 60, 40, 190);
  ctx.fillStyle = '#888';
  ctx.fillRect(10, 60 + 190 - gs * 18, 40, gs * 18);
  ctx.fillStyle = '#000';
  ctx.font = 'bold 16px Arial';
  ctx.fillText('GS', 20, 80);
  ctx.font = '14px Arial';
  ctx.fillText('m/s', 20, 95);
  ctx.font = '20px Arial';
  ctx.fillText(gs, 30, 140);
  ctx.restore();

  // ALT高度条
  ctx.save();
  ctx.fillStyle = '#fff';
  ctx.fillRect(350, 60, 40, 180);
  ctx.fillStyle = '#888';
  ctx.fillRect(350, 60 + 180 - (alt - 75) * 3, 40, (alt - 75) * 3);
  ctx.fillStyle = '#000';
  ctx.font = 'bold 16px Arial';
  ctx.fillText('ALT', 355, 80);
  ctx.font = '14px Arial';
  ctx.fillText('m/ato', 353, 100);
  ctx.font = '20px Arial';
  ctx.fillText(alt, 355, 140);
  ctx.restore();

  // 航向
  ctx.save();
  ctx.fillStyle = '#fff';
  ctx.fillRect(170, 250, 60, 25);
  ctx.fillStyle = '#000';
  ctx.font = '20px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(heading, 200, 270);
  ctx.restore();
};
onMounted(() => {
  const ctx = pfd.value.getContext('2d');
  let pitch = 0,
    roll = 0,
    heading = 84,
    gs = 8,
    alt = 99;
  setTimeout(() => {
    // 这里可以用真实数据替换
    // pitch = 10 * Math.sin(Date.now() / 1000); //pitch（俯仰角）随时间变化，做正弦波动，最大幅度10度。
    // roll = 20 * Math.sin(Date.now() / 1500); //roll（横滚角）随时间变化，做正弦波动，最大幅度20度。
    // heading = 84 + 10 * Math.sin(Date.now() / 2000); //航向、 速度、高度随时间变化，做正弦波动，最大幅度10度。
    // gs = 8 + 2 * Math.sin(Date.now() / 1200); //速度随时间变化，做正弦波动，最大幅度2度。
    // alt = 99 + 5 * Math.sin(Date.now() / 1800); //高度随时间变化，做正弦波动，最大幅度5度。
    // resizeCanvas()
    drawPFD(
      ctx,
      pitch,
      roll,
      Math.round(heading),
      Math.round(gs),
      Math.round(alt),
    );
    // window.addEventListener('resize', resizeCanvas);
    function resizeCanvas() {
      // const s = document.querySelector('.detail-map');
      // const canvas = document.getElementById('pfd');
      // canvas.style.width = s.offsetWidth + 'px'
      // canvas.style.height = s.offsetHeight + 'px'
      // const originalWidth = s.offsetWidth; // 固定原始宽度
      // const originalHeight = s.offsetHeight; // 固定原始高度
      // const windowRatio = window.innerWidth / window.innerHeight;
      // const canvasRatio = originalWidth / originalHeight;
      // let scale;
      // if (windowRatio > canvasRatio) {
      //   scale = window.innerHeight / originalHeight;
      // } else {
      //   scale = window.innerWidth / originalWidth;
      // }
      // canvas.style.transform = `scale(${scale})`;

      // const parent = canvas.parentElement;
      // const scale = Math.min(
      //   parent.clientWidth / 400,  // 原始宽度
      //   parent.clientHeight / 280  // 原始高度
      // );
      // canvas.style.transform = `scale(${scale})`;
    }
  }, 50);
  // props.droneList.forEach((item, index) => {
  //   const videoElement = document.getElementById(`video-${index}`);
  //   if (videoElement && Hls.isSupported()) {
  //     const hls = new Hls();
  //     hls.loadSource(item.streamUrl); // 假设每个无人机项都有一个 streamUrl 属性
  //     hls.attachMedia(videoElement);
  //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
  //       videoElement.play();
  //     });
  //     hlsInstances[index] = hls;
  //   } else if (
  //     videoElement &&
  //     videoElement.canPlayType('application/vnd.apple.mpegurl')
  //   ) {
  //     videoElement.src = item.streamUrl; // 假设每个无人机项都有一个 streamUrl 属性
  //     videoElement.addEventListener('canplay', function () {
  //       videoElement.play();
  //     });
  //   }
  // });
});
onBeforeUnmount(() => {
  // Object.values(hlsInstances).forEach((hls) => {
  //   hls.destroy();
  // });
});
</script>

<style lang="scss" scoped>
.task-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4vh;
  padding-left: 1.5vh;
  margin: 0;
  font-family: PingFangSC, 'PingFang SC';
  font-size: 2vh;
  font-weight: 500;
  color: #fffefe;
  user-select: none;
  background: radial-gradient(ellipse 140% 300% at 100% 50%,
      rgba(1, 34, 35, 0.2) 28%,
      rgba(7, 217, 221, 0.7) 100%);

  .icon {
    width: 3vh;
    margin-right: 1vw;
  }
}

.detail-map-section {
  background: rgb(2 19 20 / 52%);
  border: 0.01vh solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  color: #fffefe;

}

.detail-map-section1 {
  height: 30vh;

  .detail-map {
    width: 100%;
    height: 26vh;
    // border: 1px solid #fff;
  }
}

.detail-map-section2 {
  margin-top: 0.5vh;
  height: 36.5vh;

  .detail-air {
    display: flex;
    width: 100%;

    .detail-air-box {
      width: 100%;
      padding: 0.5vh;
      display: grid;
      grid-template-columns: calc(50%) calc(50%);

      .detail-air-list {
        margin: 0.5vh;

        .detail-type {
          display: flex;
          align-items: center;
          padding: 1.1vh 1vh;
          background: rgb(31 103 109 / 30%);
          border-radius: 4px;

          .detail-icon {
            width: 3vh;
            margin-left: 1vh;
          }

          .detail-text {
            padding-left: 3vh;

            .detail-name {
              font-size: 2vh;
              font-weight: bold;
            }

            .detail-status {
              margin-top: 0.5vh;
              font-size: 1.5vh;
            }
          }
        }
      }
    }
  }
}

.detail-map-section3 {
  margin-top: 0.5vh;
  height: 23vh;

  .detail-air {
    height: 16vh;

    .detail-air-box {
      display: flex;
      flex-wrap: wrap;
      padding: 0.5vh;

      .detail-air-list {
        width: calc(50% - 1vh);
        margin: 0.5vh;

        .detail-type {
          display: flex;
          align-items: center;
          background: rgb(31 103 109 / 30%);
          border-radius: 4px;
          padding: 1.5vh;


          .detail-icon {
            width: 3vh;
            margin-left: 1vh;
          }

          .detail-text {
            padding-left: 3vh;

            .detail-name {
              font-size: 2vh;
              font-weight: bold;
            }

            .detail-status {
              margin-top: 0.5vh;
              font-size: 1.5vh;
            }
          }
        }
      }

      .detail-air-list1 {
        width: calc(100% - 1vh);

        .detail-type {
          padding: 2.5vh 1vh;

          .detail-text {
            display: flex;
            justify-content: space-between;
            width: calc(100% - 3.5vh);

            .detail-position {
              font-size: 1.6vh;
            }
          }
        }
      }
    }
  }
}
</style>
